<template>
    <div class="container">
        <div class="container">
            <img :src="alllist.img" alt="" class="header-img">
            <div class="header-message">
                <div class="header-title">{{alllist.name}}</div>
                <div class="header-xx">所属分类：{{alllist.oneClass}}/{{alllist.twoClass}}</div>
                <div class="header-xx">作物编码：{{alllist.code}}</div>
                <div class="header-xx">别称：{{alllist.otherName}}</div>
            </div>
        </div>
        <div class="lu hnk"></div><div class="hnk jgxx">生育期</div>
        <div class="dutiao">
            <div class="dutiao-include" v-for="(item,index) in birthlist" :key="index" :style="'width:' + item.day/str*100 + '%;'+'background:'+item.sort+';'">
                <div class="dutiao-hint">
                    <div>
                        {{item.name}}
                    </div>
                    <div>
                        {{item.day}}天
                    </div>
                </div>
            </div>
        </div>
        <div style="margin-top:50px;" class="lu hnk"></div><div class="hnk jgxx">产出物</div>
        <div class="jgcontainer">
            <el-table
                :data="alllist.cropList"
                style="width: 100%;margin-top:20px;">
                <el-table-column prop="name" label="产出物名称">
                   
                </el-table-column>
                <el-table-column prop="position" label="部位">
               
                </el-table-column>
                <el-table-column
                    prop="img"
                    label="图片">
                    <template slot-scope="scope">
                        <img :src="scope.row.img" alt="" style="width:36px;height:36px;">
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div align="center">
            <el-button type="success" style="margin:50px auto;" @click ="back">返回</el-button>
			<!-- <el-button @click="handleDelete">删除</el-button>
			<el-button @click="handleEdit">编辑</el-button> -->
        </div>
        
    </div>
</template>

<script>
    import {crop_findById,model_crop_delete,model_crop_load} from "@/request/api"
    export default {
        data(){
            return{
               
                alllist:'',
                birthlist:'',
                str:0
            }
        },
        mounted(){
            const _this = this;
            this.id = _this.$route.query.id
            this.getshuju()
        },
        computed:{
         
        },
        methods:{
			handleEdit(){
				this.$router.push({
					path:'/basesource/addzw',
					query:{id:this.id}
				})
			},
			handleDelete(){
				model_crop_delete(this.id).then((res)=>{
					this.$notify({
						title: '提示',
						message: '删除成功',
						type: 'success',
						duration:1000
					 });
				})
			},
            getshuju(){
                model_crop_load( this.id).then((res)=>{
                    this.modelCrop = res.modelCrop
                    this.modelCrop.img = this.$store.state.plantImg + this.modelCrop.img
                    this.birthlist = res.births
					this.parentName = res.parentName
					this.crops = res.crops
                    this.str= 0
                    for(var i=0;i<this.birthlist.length;i++){
                        this.str +=  Number(this.birthlist[i].day)
                        let r = parseInt(0)
                        let g = 255-parseInt(255/(i+1))
                        let b = parseInt(0)
                        var bgcolor = 'rgba('+r+','+g+','+b+','+0.7+')'
                        this.birthlist[i].sort = bgcolor
                    }
                    for(var s=0;s<this.crops.length;s++){
                        this.crops[s].img = this.$store.state.plantImg + this.crops[s].img 
                    }
                })
                
            },
            back(){
                this.$router.go(-1)
            }
        }
    }
</script>

<style scoped>
.background{
    background: #ffffff;;
}
.dutiao{
    height:10px;
    width:90%;
    margin:30px auto;
}
.container{
    position: relative;
}
.header-img{
    width:100px;
    height:100px;
}
.header-message{
    position:absolute;
    top:35px;
    left:150px;
}
.header-title{
    font-weight:600;
    height:20px;
    line-height:20px;
}
.header-xx{
    font-size:12px;
    height:25px;
    line-height:25px;
}
.lu{
    width: 8px;
    height: 16px;
    margin-top:20px;
    background: greenyellow;
}
.hnk{
    display:inline-block;
}
.jgxx{
    margin-left:10px ;
    font-weight:600;
    font-size: 15px;
}
.dutiao-include{
    height:10px;
    display:inline-block;
    text-align: center;
    position: relative;
}
.dutiao-hint{
    position: absolute;;
    font-size:14px;
    width:50px;
    left: 30%;
    top:20px;
    border: 1px solid #333;
    border-radius:5px;
    padding: 5px;
}
</style>